var RelationSupplierForm = function () {
  var SupplierSelect = function () {
    var template = /* html */ `
      <div class="supplier-select">
        <div>
          <span>关联供应商:</span>
          <el-select filterable v-model="supplier" value-key="id" placeholder="请选择关联供应商" :filter-method="filterMethod"
            @visible-change="handleVisibleChange">
            <el-option v-for="supplier in suppliers" :key="'supplier_'+supplier.id" :value="supplier" :label="supplier.name">
              <div class="clearfix">
                <span style="float:left;margin-right:15px">{{supplier.name}}</span>
                <span style="float:right;color:#8492a6">{{supplier.code}}</span>
              </div>
            </el-option>
          </el-select>
        </div>

        <template v-if="supplier!==''">
        <div>
          <el-form size="medium" label-width="calc(5em + 12px)">
            <el-form-item label="供应商名称">
              <span>{{supplier.name}}</span>
            </el-form-item>
            <el-form-item label="供应商代码">
              <span>{{supplier.code}}</span>
            </el-form-item>
            <el-form-item label="联系人">
              <span>{{supplier.contact}}</span>
            </el-form-item>
            <el-form-item label="联系电话">
              <span>{{supplier.phone}}</span>
            </el-form-item>
            <el-form-item label="邮箱">
              <span>{{supplier.email}}</span>
            </el-form-item>
            <el-form-item label="结算方式">
              <span>{{i18n.getMsg('customer.paymentWayType.'+supplier.paymentWay)}}</span>
            </el-form-item>
            <el-form-item label="是否含税">
              <span>{{i18n.getMsg('customer.tax.'+supplier.isTax)}}</span>
            </el-form-item>
            <el-form-item label="运费负担">
              <span>{{i18n.getMsg('customer.freight.'+supplier.preight)}}</span>
            </el-form-item>
            <el-form-item label="传真">
              <span>{{supplier.fax}}</span>
            </el-form-item>
            <el-form-item label="地址">
              <span>{{supplier.address}}</span>
            </el-form-item>
          </el-form>
        </div>
        </template>
      </div>
    `;

    return {
      props: {
        supplierList: {
          type: Array,
          required: true
        }
      },

      data: function () {
        return {
          supplier: '',
          suppliers: this.supplierList,
          i18n: i18n
        };
      },

      methods: {
        filterMethod: function (queryStr) {
          var supplierList = this.supplierList;
          if (queryStr !== '') {
            supplierList = _.filter(supplierList, function (supplier) {
              return supplier.filterData(queryStr);
            });
          }
          this.suppliers = supplierList;
        },

        handleVisibleChange: function (visible) {
          if (visible) {
            this.suppliers = this.supplierList;
          }
        },

        getSupplier: function () {
          return this.supplier;
        }
      },

      template: template
    };
  }();

  var SupplierForm = function () {
    var template = /* html */ `
      <div class="supplier-form">
        <el-form size="medium" label-width="calc(5em + 25px)">
          <el-form-item required label="供应商代码">
            <el-input class="form-input" v-model="supplier.code"></el-input>
          </el-form-item>
          <el-form-item required label="供应商名称">
            <el-input class="form-input" v-model="supplier.name"></el-input>
          </el-form-item>
          <el-form-item required label="联系人">
            <el-input class="form-input" v-model="supplier.contact"></el-input>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input class="form-input" v-model="supplier.phone"></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input class="form-input" v-model="supplier.email"></el-input>
          </el-form-item>
          <el-form-item required label="结算方式">
            <el-select class="form-input" v-model="supplier.paymentWay">
              <el-option v-for="paymentWayType in paymentWayTypeList" :key="'paymentWayType_'+paymentWayType.value"
                :value="paymentWayType.value" :label="paymentWayType.label"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否含税">
            <el-select class="form-input" v-model="supplier.isTax">
              <el-option v-for="tax in taxList" :key="'tax_'+tax.value" :value="tax.value" :label="tax.label"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="运费负担">
            <el-select class="form-input" v-model="supplier.preight">
              <el-option v-for="preight in preightList" :key="'preight_'+preight.value" :value="preight.value"
                :label="preight.label"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="传真">
            <el-input class="form-input" v-model="supplier.fax"></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-input type="textarea" class="form-input" v-model="supplier.address" :autosize="{minRow:1}" resize="none"
              @keydown.enter.native.prevent></el-input>
          </el-form-item>
        </el-form>
      </div>
    `;

    return {
      props: {
        supplierList: {
          type: Array,
          required: true
        }
      },

      data: function () {
        var paymentWayTypeList = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '18', '24'];
        return {
          supplier: new SupplierModel(),
          paymentWayTypeList: i18n.getDropDown('customer.paymentWayType', paymentWayTypeList),
          taxList: i18n.getDropDown('customer.tax', [0, 1]),
          preightList: i18n.getDropDown('customer.freight', [0, 1]),
        };
      },

      methods: {
        getSupplier: function () {
          return this.supplier;
        }
      },

      template: template
    };
  }();

  var template = /* html */ `
    <div class="relation-supplier-form" v-loading.fullscreen.lock="loading">
      <div class="relation-supplier-form-group">
        <div class="group-title">关联方式</div>
        <div class="form-group-conent">
          <div class="select-type">
            <el-radio v-model="type" label="select">
              <span class="form-text">关联公司现有供应商</span>
            </el-radio>
            <el-radio v-model="type" label="create">
              <span class="form-text">创建新的关联供应商</span>
            </el-radio>
          </div>
        </div>
      </div>
      <div v-if="type==='select'" class="relation-supplier-form-group">
        <div class="group-title">关联公司现有供应商</div>
        <supplier-select ref="supplierSelect" class="form-group-conent" :supplier-list="supplierList">
        </supplier-select>
      </div>
      <div v-else-if="type==='create'" class="relation-supplier-form-group">
        <div class="group-title">创建新的关联供应商</div>
        <supplier-form ref="supplierForm" class="form-group-conent" :supplier-list="supplierList">
        </supplier-form>
      </div>
      <div v-if="type!==''" style="text-align:center">
        <el-button size="medium" type="primary" @click="toRelationSupplier">关联供应商</el-button>
      </div>
    </div>
  `;

  return {
    props: {
      material: {
        typ: Object,
        required: true
      }
    },

    data: function () {
      return {
        loading: false,
        type: '',
        supplierList: [],
      };
    },

    created: function () {
      this.loading = true;
      var self = this;
      this.setSupplierList().then(function () {
        self.loading = false;
      });
    },

    methods: {
      setSupplierList: function () {
        var self = this;
        return ajaxRequest('basicData/queryCustomersTow', {
          type: 1,
          status: '使用'
        }, false).then(function (res) {
          var supplierList = res.returnData;
          supplierList = _.filter(supplierList, function (obj) {
            return SysUtil.isEmpty(obj.linkCompany);
          });

          supplierList = _.map(supplierList, function (supplier) {
            supplier = new SupplierModel(supplier, true);
            return supplier;
          });

          self.supplierList = supplierList;
          return supplierList;
        }).catch(function () {
          return [];
        });
      },

      toRelationSupplier: function () {
        var type = this.type;
        if (type === '') {
          this.$alert('请选择关联方式', '信息');
          return;
        }

        if (type === 'select') {
          this.relationExistSupplier();
        } else if (type === 'create') {
          this.relationNewSupplier();
        }
      },

      relationExistSupplier: function () {
        var supplier = this.$refs['supplierSelect'].getSupplier();
        if (supplier === '') {
          this.$alert('请选择需要关联的供应商', '信息');
          return;
        }

        var material = this.material;

        this.loading = true;
        var self = this;
        ajaxRequest('shoppingMall/relationSuppilerAndCompany', {
          id: supplier.id,
          linkCompany: material.company
        }).then(function () {
          self.$alert('供应商关联成功', '信息', {
            callback: function () {
              self.$emit('relation-success')
            }
          });
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      relationNewSupplier: function () {
        var supplier = this.$refs['supplierForm'].getSupplier();
        var code = supplier.checkValid();
        if (code !== '') {
          var msg = i18n.getMsg(`shoppingMallMaterial.error.supplierForm.${code}`);
          this.$alert(msg, '信息');
          return;
        }

        if (!this.checkUniq(supplier)) {
          return;
        }

        var email = supplier.email;
        var reg = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
        if (email!=='' && !reg.test(email)) {
          var msg = i18n.getMsg('shoppingMallMaterial.error.supplierForm.emailInvalid');
          this.$alert(msg, '信息');
          return;
        }

        var postData = supplier.getObject();
        postData.linkCompany = this.material.company;
        this.loading = true;
        var self = this;
        ajaxRequest('shoppingMall/importShoppingCallCompanyToSuppiler', postData).then(function () {
          self.$alert('供应商关联成功', '信息', {
            callback: function () {
              self.$emit('relation-success')
            }
          });
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      checkUniq: function (supplier) {
        var supplierList = this.supplierList;
        if (supplierList.length === 0) {
          return true;
        }

        var uniqSupplier = _.find(supplierList, function (obj) {
          return obj.code === supplier.code || obj.name === supplier.name;
        });

        if (uniqSupplier === undefined) {
          return true;
        }

        var field;
        if (uniqSupplier.code === supplier.code) {
          field = 'code';
        } else if (uniqSupplier.name === supplier.name) {
          field = 'name';
        }

        var msg = i18n.getMsg(`shoppingMallMaterial.error.supplierForm.${field}NonUnique`);
        this.$alert(msg, '信息');
        return false;
      }
    },

    components: {
      SupplierSelect: SupplierSelect,
      SupplierForm: SupplierForm
    },

    template: template
  };
}();